<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="明月">
    <title>唯品会</title>
    <link rel="stylesheet" type="" href="./font-awesome-4.7.0/css/font-awesome.css">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background-color: white;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .top {
            width: 100%;
            height: 30px;
            background-color: #f5f5f5;
        }

        .container {
            width: 1170px;
            margin: 0 auto;
        }

        .container>div {
            color: #ccc;
            line-height: 30px;
            display: flex;
            justify-content: space-between;
            font-size: 10px;
        }

        .container>div>ul>li a {
            color: #555555;
            font-size: 12px;
        }

        .top a:hover {
            color: #f10180;
        }

        .top-right {
            width: 840px;
            display: flex;
            justify-content: space-between;
        }

        .top .icon-top {
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 5px solid #999;
            border-left: 5px solid transparent;
            /* border-bottom: 5px solid transparent; */
            border-right: 5px solid transparent;
            transition: all 0.3s linear;
        }

        .zhuan-one:hover .icon-top {
            border-top: 5px solid #f10180;
            transform: rotate(180deg);
            /* .container>div>li>a  */
        }

        .icon-top.one {
            position: relative;
            left: 13px;
            top: -1px;
        }

        .icon-a {
            position: relative;
            left: 5px;
            top: -1px;
        }

        .icon-b {
            position: relative;
            right: 3px;
            top: 2px;
        }

        .icon-c {
            display: inline-block;
            background-image: url('img/header.png');
            background-position: -98px -146px;
            width: 16px;
            height: 19px;
            position: relative;
            top: 3px;
        }

        .icon-c:hover {
            display: inline-block;
            background-image: url('img/header.png');
            background-position: -123px -146px;
            width: 16px;
            height: 19px;
            position: relative;
            top: 3px;
        }
        /*---------------------------------  */

        .top-left>li,
        .top-right>li {
            height: 30px;
            border: 1px solid transparent;
            position: relative;
        }

        .top-left>li:hover,
        .top-right>li:hover {
            border: 1px solid #ccc;
            background-color: #fff;
        }

        .top-left .xiala,
        .top-right .xiala {
            border: 1px solid #ccc;
            width: 130px;
             visibility: hidden; 
            position: absolute;
            
        }

         .top-left>li:hover .xiala {
            visibility: visible;
            background-color: white;
            z-index: 500;
        }

        .top-right>li:hover .xiala {
            visibility: visible;
            background-color: white;
             z-index: 500;
        } 

        .icon-e {
            width: 50px;
            height: 50px;
            display: inline-block;
            background-image: url('img/header.png');
            background-position: 0px -180px;
            position: relative;
            top: 8px;
        }

        .right-one .first div li {
            margin: 5px;
        }

        .right-one .first div {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .top-right .six {
            position: relative;
            right: 70px;
        }

        .top-right .seven {
            position: relative;
            right: 150px;
        }

        .top-right .seven .seven-1,
        .top-right .seven .seven-2 {
            display: flex;
        }

        .top-right .seven .seven-1 li,
        .top-right .seven .seven-2 li {
            margin-right: 10px;
        }

        .icon-q {
            width: 25px;
            height: 17px;
            background-position: -50px -200px;
            display: inline-block;
            background-image: url('img/header.png');
        }

        .second {
            display: flex;
            margin-left: 5px;
        }

        .second li span {
            position: relative;
            left: -3px;
        }

        .second p {
            display: inline-block;
            width: 30px;
            height: 2px;
            background-color: #CCCCCC;
            margin: 0;
            position: relative;
            top: -7px;
            left: -5px;
        }

        .second-a article:hover {
            text-decoration: underline;
        }

        .second-a article button {
            margin-left: 50px;
            background-color: #f10180;
            border: none;
            width: 50px;
            height: 20px;
        }

        .icon-r {
            width: 127px;
            height: 50px;
            display: inline-block;
            background-image: url('img/header.png');
            background-position: -175px 0px;
            position: relative;
            top: 30px;
        }

        .icon-w {
            width: 15px;
            height: 20px;
            display: inline-block;
            background-image: url('img/header.png');
            background-position: 0px -60px;
            position: relative;
            top: 4px;
        }

        .qian {
            width: 20px;
            height: 13px;
            background-color: #f10180;
            border: none;
            border-radius: 10px;
            color: white;
            line-height: 13px;
            position: relative;
            top: -6px;
            right: 13px;
        }

        .container .head {
            height: 100px;
            display: flex;
            justify-content: space-between;
        }

        .head>ul>li>a>img {
            width: 130px;
            height: 100px;
        }

        .head>ul {
            width: 600px;
            display: flex;
            justify-content: flex-start;
        }

        .head>ul>li:nth-child(5),
        .head>ul>li:nth-child(4) {
            line-height: 100px;
        }

        .shop-gou {
            position: relative;
            margin-left: 20px;
        }

        .dai {
            position: absolute;
            width: 110px;
            height: 50px;
            line-height: 50px;
            top: 25px;
            border: 1px solid transparent;
        }

        .shop-gou:hover .dai {
            background-color: #F9FBFe;
            border: 1px solid #ccc;
        }

        .shop-gou:hover .eight {
            visibility: visible;
            background-color: #F9FBFe;
            border: 1px solid #ccc;
        }

        .shop-gou .eight {
            position: absolute;
            width: 250px;
            height: 100px;
            background-color: #F9FBFe;
            right: -110px;
            top: 75px;
            border: 1px solid #ccc;
             visibility: hidden; 
            z-index: 500;
        }

        .shop-gou .eight>li {
            margin-left: 20px;
        }
        /*--------------nav--------------------  */

        nav {
            width: 100%;
            height: 38px;
            background-color: #f10180;
            z-index: 500;
        }

        nav .container {
            display: flex;
            justify-content: space-between;
            color: #ffffff;
        }

        .nav-left>li,
        .nav-right>li {
            height: 38px;
            width: 100px;
            text-align: center;
        }

        .nav-left>li:hover,
        .nav-right>li:hover {
            background-color: #bd1067;
        }

        .nav-left {
            line-height: 38px;
            width: 700px;
            display: flex;
            justify-content: space-between;
        }

        .nav-right {
            line-height: 38px;
            width: 160px;
            display: flex;
            justify-content: space-between;
        }

        .nav-right img {
            position: relative;
            top: 6px;
            right: 5px;
        }

        .nav-right a {
            position: relative;
            top: -3px;
        }

        .icon-x {
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 5px solid #fff;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            position: relative;
            top: -2px;
            left: 5px;
            transition: all 0.1s linear;
        }

        .nav-more:hover .icon-x {
            transform: rotate(180deg);
        }

        .nav-more {
            position: relative;
        }

        .nav-more .move {
            position: absolute; 
            width: 550px;
            height: 280px;
            background-color: white;
            right: 1px;
             opacity: 0; 
        }
        .nav-more .move-ul {
            display: flex;
            flex-wrap: wrap;
            margin-top: 25px;
            margin-left: 8px;
           
        }
        .nav-more .move-ul li {
            width: 170px;
            height: 96px;
            margin-bottom: 10px;
            margin-left: 5px;
            overflow: hidden;
            position: relative;
        }

        .nav-more:hover .move {
            opacity: 1;
             z-index: 500;
        }

        .cover {
            width: 100%;
            height: 100%;
            position: absolute;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .9) 100%);
            top: 0;
            left: 0;
            opacity: 0;
            transition: all 300ms;
        }

        .cover:hover {
            opacity: 1;
        }

        .corver-info {
            position: absolute;
            top: 40px;
            left: 70px;
            transition: all 300ms;
        }

        .move-ul li:hover .corver-info {
            top: 10px;
        }
        /*--------------main--------------------  */

        main {
            width: 100%;
            height: 2000px;
        }

        main .main-bg {
            width: 100%;
            height: 440px;
            background-image: url('img/bg.jpg');
            background-repeat: no-repeat;
            position: relative;
        }

        .main-ul {
            width: 1148px;
            height: 440px;
            margin: 0 auto;
            overflow: hidden;
        }

        .main-ul li {
            display: none;
        }

        .main-ul img {
            width: 1120px;
            position: absolute;
            top: 50px;
            left: 400px;
        }

        .main-ul .active {
            display: block;
        }

        .lunbo {
            position: absolute;
            left: 390px;
            width: 1140px;
            height: 50px;
            line-height: 30px;
            background-color: white;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
        }

        .lunbo li {
            width: 200px;
            height: 30px;
            border-bottom: 2px solid transparent;
        }

        .lunbo .current {
            border-bottom: 2px solid #bd1067;
        }

        .prev {
            width: 50px;
            height: 50%;
            background-image: url("img/lun.png");
            background-position: 0 center;
            background-repeat: no-repeat;
            position: absolute;
            top: 120px;
            left: 300px;
            display: none;
            transition: all 0.5s linear;
        }
         .main-bg:hover .prev{
             left: 400px; 
             /* background-position: -153px center;   */
        }

         .next {
            width: 50px;
            height: 100%;
            background-image: url("img/lun.png");
            background-position: -51px center;
            background-repeat: no-repeat;
            position: absolute;
            top: 10px;
            right:300px;
            display: none;
        } 
         .main-bg:hover .next{
            right: 384px;
            /* background-position: -102px center;  */
        } 
        /*---------------------------------------------------  */

        .bg-v {
            width: 100%; 
            height: 200px;
            background-image: url('img/bg_v3.jpg');
            background-repeat: no-repeat;
            position: absolute;
            top:650px;
            left: 370px;
        }
        .minimg {
            margin-left: 600px;
            margin-top: 40px;
            width: 500px;
            display: flex;
            justify-content: flex-end;
            position: relative;
        }

        .minimg li img {
            width: 90%;
        }

        .top1 {
            display: inline-block;
            width: 45px;
            height: 45px;
            background-image: url('img/icon.png');
            background-position: 0 0;
            position: absolute;
            top: -13px;
            right: 340px;
        }

        .top2 {
            display: inline-block;
            width: 45px;
            height: 45px;
            background-image: url('img/icon.png');
            background-position: 0 -50px;
            position: absolute;
            top: -13px;
            right: 170px;
        }

        .top3 {
            display: inline-block;
            width: 45px;
            height: 45px;
            background-image: url('img/icon.png');
            background-position: 0 -100px;
            position: absolute;
            top: -13px;
            right: 7px;
        }

        .line {
            position: absolute;
            top: 830px;
            left: 370px;
        }
        /*---------------------aside----------------------*/
        aside{
            width: 30px;
            height: 1000px; 
            background-color: #000;
            position: fixed;  
            top: 0;
            right: 0;
        }
        .aside-ul{
            height: 500px;
            position: relative;
            top:200px;
            color: #fff;
            z-index: 500;
            background-color: #000;
            /* background-color: skyblue; */
        }
        .aside-bottom{
            height: 100px;
            position: relative;
            bottom: -330px;
            color: #fff;
            z-index: 500;
            background-color: #000;
            /* background-color: skyblue; */
        }
        .fa{
            width: 30px;
            height: 30px;
            color: #fff;   
            display: inline-block; 
           font-size: 25px;
           line-height: 30px;
           padding-right: 30px;
        
        }
        .fa-user-o{
           margin-top: 8px;
        margin-right: 5px;
          font-size: 22px;
        }
        .user{
            font-size: 13px;
        }
        .font{
            padding: 3px 6px;
            margin-bottom: 5px;
            text-align: center;
       }
        .font-one:hover{
             background-color: #f10180;
        }
        .icon-one{
            display: inline-block;
            background-image: url('img/sprite.png');
            background-position:-48px -93px;
            width: 17px;
            height: 25px;
         
        }
        /*-------------------侧边栏弹窗----------------  */
        .right-one{
             width: 200px;
             height: 250px;
             background-color: white; 
             position: absolute;
             top:0;
             /* opacity: 0;  */
             left:50px;
             transition: all 0.2s linear;
             z-index: -500;
        }
        .meng{
            margin-top: 20px;
            width: 50px;
            height: 50px;
            display: inline-block;
            background-image: url('img/header.png');
            background-position: 0px -180px;
        }
        .ding{
            display: inline-block;
            background-image: url('img/sprite.png');
            background-position: -196px -66px;
            width: 30px;
            height: 22px;
        }
        .ding:hover{
            background-image: url('img/sprite.png');
             background-position: -195px -35px; 
        }
        .xiaoxi{
            display: inline-block;
            background-image: url('img/sprite.png');
            background-position: -196px -90px;
            width: 30px;
            height: 22px;
        }
        .xiaoxi:hover{
            background-image: url('img/sprite.png');
            background-position: -196px -3px;
        }
        .biao li a:hover{
            color: #f10180;
        }
        .biao li{
         width:90px;
         height:90px;
         display:inline-block;
        margin-top:10px;
        color: #000;
        padding-top: 13px;
        }
        .font-one{
            position: relative;
        }
        .founttu:hover .right-one{
             left: -200px;
             opacity: 1;
        }
        
        .rifhtline{
            width: 100px;
            height: 36px;
            line-height: 36px;
            background-color: #fff;
            opacity: 0;     
            color: #000;
            transition: all 0.2s linear;
            position: absolute;
            left:50px;   
             /* border: 1px solid red; */
            top:0;
        }
         .fontli:hover .rifhtline{
                left: -100px;
                opacity: 1;
        } 
    </style>
</head>

<body>
    <header>
        <div class="top">
            <div class="container">
                <div>
                    <ul class="top-left">
                        <li style="width: 60px;" class="zhuan-one">
                            <a href="#">河南</a>
                            <span class="icon-top one"></span>
                            <ul class="xiala left">
                                <p style="width: 56px;background-color: white;height:8px;
                                margin:0;position:relative;left:-2px;top:-5px;"></p>
                                <h3 style="margin:0;border-bottom:1px dashed #999;"><a href="#">请选择所在的收获地区</a></h3>
                                <li><a href="#">A &#x3000;安徽&#x3000;澳门</a></li>
                                <li><a href="#">B &#x3000;北京</a></li>
                                <li><a href="#">C &#x3000;重庆</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="top-right">
                        <li style="width: 50px;" class="zhuan-one right-one">
                            <a href="#">请登录</a>
                            <ul class="xiala first">
                                <p style="width: 50px;background-color: white;height:8px;
                                margin:0;position:relative;left:-2px;top:-5px;"></p>
                                <h4 style="margin:0;border-bottom:1px solid #f10180;"><span class="icon-e"></span><a href="#">您好![请登录]</a></h4>
                                <div>
                                    <li><a href="#">我的收藏</a></li>
                                    <li><a href="#">我的订单</a></li>
                                    <li><a href="#">零钱</a></li>
                                    <li><a href="#">我的优惠券</a></li>
                                    <li><a href="#">我的唯品币</a></li>
                                    <li><a href="#">唯品金融</a></li>
                                </div>
                            </ul>
                        </li>
                        <li style="width: 40px;"><a href="#">注册</a></li>/
                        <li style="width: 75px;" class="zhuan-one">
                            <span class="icon-b"><img src="img/header_sign.gif" alt=""></span>
                            <a href="#">签到有礼</a>

                            <ul class="xiala second-a" style="width: 360px;">
                                <p style="width: 75px;background-color: white;height:8px;
                                margin:0;position:relative;left:-2px;top:-5px;"></p>
                                <ul class="second" style="border-bottom: 1px solid #eee;">
                                    <li><span class="icon-q"></span>1天</li>
                                    <li>
                                        <p></p>
                                    </li>
                                    <li><span class="icon-q"></span>2天</li>
                                    <li>
                                        <p></p>
                                    </li>
                                    <li><span class="icon-q"></span>3天</li>
                                    <li>
                                        <p></p>
                                    </li>
                                    <li><span class="icon-q"></span>4天</li>
                                    <li>
                                        <p></p>
                                    </li>
                                    <li><span class="icon-q"></span>5天</li>
                                    <li>
                                        <p></p>
                                    </li>
                                    <li><span class="icon-q"></span>6天</li>
                                    <li>
                                        <p></p>
                                    </li>
                                    <li><span class="icon-q"></span>7天</li>
                                </ul>
                                <article>
                                    <a href="#">每天签到送惊喜，连续签到更享心动奖励</a>
                                    <button type="text">签到</button>
                                </article>

                            </ul>
                        </li>/
                        <li style="width: 70px;"><a href="#">我的订单</a></li>/
                        <li style="width: 70px;" class="zhuan-one">
                            <a href="#">我的特卖</a><span class="icon-top icon-a"></span>
                            <ul class="xiala three" style="width:100px;text-align: nter;">
                                <p style="width: 70px;background-color: white;height:8px;
                                margin:0;position:relative;left:-2px;top:-5px;"></p>
                                <li><a href="#">品牌收藏（0）</a></li>
                                <li><a href="#">商品收藏（0）</a></li>
                                <li><a href="#">我的足迹（0）</a></li>
                            </ul>
                        </li>/
                        <li style="width: 80px;" class="zhuan-one">
                            <a href="#">会员俱乐部</a><span class="icon-top icon-a"></span>
                            <ul class="xiala four" style="width:100px;text-align: center;">
                                <p style="width: 80px;background-color: white;height:8px;
                                margin:0;position:relative;left:-2px;top:-5px;"></p>
                                <li><a href="#">俱乐部首页</a></li>
                                <li><a href="#">唯品币兑换</a></li>
                                <li><a href="#">免费抽大奖</a></li>
                            </ul>
                        </li>/
                        <li style="width: 70px;" class="zhuan-one">
                            <a href="#">客户服务</a><span class="icon-top icon-a"></span>
                            <ul class="xiala five" style="width:100px;padding-left:10px;">
                                <p style="width: 68px;background-color: white;height:8px;
                                margin:0;position:relative;left:-11px;top:-5px;"></p>
                                <li><a href="#">联系客服</a></li>
                                <li><a href="#">帮助中心</a></li>
                                <li><a href="#">服务中心</a></li>
                                <li><a href="#">知识产权投诉</a></li>
                            </ul>
                        </li>/
                        <li style="width: 60px;">
                            <span class="icon-c"></span><a href="#">手机版</a>
                            <ul class="xiala six">
                                <p style="width: 60px;background-color: white;height:8px;
                                margin:0;position:relative;left:68px;top:-4px;"></p>
                                <li><img src="img/er.jpg" alt="" style="width:110px;height:110px;margin-left:8px;margin-top:5px;"></li>
                                <li style="margin-left:15px;"><a href="#" style="font-size:14px;">随时逛&#x3000;及时抢</a></li>
                            </ul>
                        </li>/
                        <li style="width: 50px;" class="zhuan-one">
                            <a href="#">更多</a><span class="icon-top icon-a"></span>
                            <ul class="xiala seven" style="width:200px;padding-left:10px;">
                                <p style="width: 50px;background-color: white;height:8px;
                                margin:0;position:relative;left:138px;top:-4px;"></p>
                                <h4 style="margin:0;"><a href="#">合作专区</a></h4>
                                <div class="seven-1" style="border-bottom: 1px dashed #999;">
                                    <li><a href="#">联名卡申请</a></li>
                                    <li><a href="#">唯品卡</a></li>
                                    <li><a href="#">支付专区</a></li>
                                </div>
                                <h4 style="margin:0;"><a href="#">关于我们</a></h4>
                                <div class="seven-2">
                                    <li><a href="#">Sell on vip</a></li>
                                    <li><a href="#">品牌招商</a></li>
                                    <li><a href="#">官方博客</a></li>
                                </div>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="head">
                <span class="icon-r"></span>
                <ul class="shop">
                    <li><a href="#"><img src="img/1.png" alt=""></a></li>
                    <li><a href="#"><img src="img/2.png" alt=""></a></li>
                    <li><a href="#"><img src="img/3.png" alt=""></a></li>
                    <li>|</li>
                    <li class="shop-gou">
                        <div class="dai">
                            <a href="#" class="shop-gou-a"><span class="icon-w"></span>
                            <button class="qian">0</button>我的购物袋</a>
                        </div>
                        <ul class="xiala eight">
                              <p style="width: 107px;background-color: #fff;height:8px;
                                margin:0;position:relative;left:140px;top:-5px;"></p>
                            <li>好像还未登录!<a href="#" style="color:#f10180;">马上登录</a>查看购物袋吧!</li>
                        </ul>

                    </li>
                </ul>
            </div>
        </div>
    </header>
    <nav>
        <div class="container">
            <ul class="nav-left">
                <li style="background-color:#bd1067;"><a href="#">首页</a></li>
                <li><a href="#">唯品国际</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">家居家电</a></li>
                <li><a href="#">男士</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">生活超市</a></li>
                <li><a href="#">金融</a></li>
                <li class="nav-more">
                    <a href="#">更多</a>
                    <span class="icon-x"></span>
                    <section class="move">
                        <ul class="move-ul">
                            <li>
                                <a href="#">
                            <img src="img/001.jpg" alt="">
                            <div class="cover"></div>
                            <div class="corver-info">
                                <p>女装</p>
                            </div>
                          </a>
                            </li>
                            <li>
                                <a href="#">
                                <img src="img/002.jpg" alt="">
                                <div class="cover"></div>
                            <div class="corver-info">
                                <p>女装</p>
                            </div>
                            </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/003.jpg" alt="">
                                    <div class="cover"></div>
                            <div class="corver-info">
                                <p>女装</p>
                            </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/004.jpg" alt="">
                                    <div class="cover"></div>
                            <div class="corver-info">
                                <p>女装</p>
                            </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/005.jpg" alt="">
                                    <div class="cover"></div>
                            <div class="corver-info">
                                <p>女装</p>
                            </div>
                                </a>
                            </li>
                        </ul>
                    </section>
                </li>
            </ul>
            <ul class="nav-right">
                <li><img src="img/cc.png" alt=""><a href="#">分类</a></li>
                <li style="color:#bd1067;">|</li>
                <li><img src="img/aa.png" alt=""><a href="#">预告</a></li>
            </ul>
        </div>
    </nav>
    <main>
        <div class="main-bg">
              <div>  
                <ul class="main-ul">
                    <li class="active"><a href="#"><img src="img/lunbo01.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/lunbo02.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/lunbo03.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/lunbo04.jpg" alt=""></a></li>
                </ul>
                <a href="#" class="prev"></a>
                <a href="#" class="next"></a>
                <ul class="lunbo">
                    <li class="current"><a href="#">欧莱雅集团VIP大牌日</a></li>
                    <li><a href="#">时尚风暴 最高满199减100</a></li>
                    <li><a href="#">居家夏末福利大派发</a></li>
                    <li><a href="#">全球早秋扫货指南</a></li>
                </ul>
            </div>
            </div>
            <div class="cont">
                <div class="bg-v">
                    <ul class="minimg">
                        <li>
                            <a href="#">
                        <span class="top1"></span>
                        <img src="img/66.jpg" alt="">
                    </a>
                        </li>
                        <li>
                            <a href="#">
                             <span class="top2"></span>
                            <img src="img/67.jpg" alt="">
                        </a>
                        </li>
                        <li>
                            <a href="#">
                            <span class="top3"></span>
                            <img src="img/68.jpg" alt=""> 
                        </a>
                        </li>
                    </ul>
                </div>
                <span class="line"><img src="img/title_v2.jpg" alt=""></span>
            </div>
    </main>
    <aside>
            <ul class="aside-ul">
                <li class="font font-one founttu">
                    <a href="#"><i class="fa fa-user-o"></i>
                        <span class="user">账户</span>
                    </a>
                    <ul class="right-one">
                        <li><a href="#"><span class="meng"></span></a></li>
                        <li style="color:#000;">您好！请<a href="#" style="color:#f10180;">登录</a>
                            &nbsp;|&nbsp;<a href="#" style="color:#f10180;">注册</a></li>
                        <div class="biao"style="background-color:#eee;width:200px;height:100px;margin-top:10px;">
                        <li>
                            <a href="#">
                                <span class="ding"></span>
                                <p style="margin-top:0;">我的订单</p>
                            </a>
                        </li>
                        <li style="border-left:1px solid #666;">
                            <a href="#"><span class="xiaoxi"></span><p style="margin-top:0;">我的消息</p></a>
                        </li>
                        </div>
                        <li style="float:right;padding-top:20px;">
                            <a href="#" style="color:skyblue;font-size:14px;">会员俱乐部</a>
                        </li>
                    </ul>
                </li>
                <li class="font font-one fontli" style="background-color: #f10180;padding:15px 5px;">
                    <a href="#"><span class="icon-one"></span>
                        <span class="user">购物袋</span>
                        <div style="width:20px;height:20px; line-height:20px;background-color:white;
                        border-radius:50px;color:#f10180;font-size:13px;">0</div>
                    </a>
                </li>
                <li class="font font-one fontli" style="margin-top:20px;">
                    <a href="#">
                        <i class="fa fa-money"></i>
                       <div class="rifhtline right-two"><a href="#">我的优惠券</a></div>
                    </a>
                </li>
                <li class="font font-one fontli" style="margin-top:20px;">
                    <a href="#">
                        <i class="fa fa-heart-o"></i>
                       <div class="rifhtline right-three"><a href="#">品牌收藏</a></div>
                    </a>
                </li>
                 <li class="font font-one fontli" style="margin-top:20px;">
                    <a href="#">
                        <i class="fa fa-star-o"></i>
                       <div class="rifhtline right-four"><a href="#">商品收藏</a></div>
                    </a>
                </li>
                 <li class="font font-one fontli" style="margin-top:20px;">
                    <a href="#">
                        <i class="fa fa-history"></i>
                       <div class="rifhtline right-five"><a href="#">我的足迹</a></div>
                    </a>
                </li>
            </ul>
            <ul class="aside-bottom">
                <li class="font font-one fontli">
                    <a href="#">
                        <i class="fa fa-edit (alias)"></i>
                       <div class="rifhtline right-six"><a href="#">会员反馈</a></div>
                    </a>
                </li>
                <li class="font font-one fontli backtop" style="margin-top:20px;">
                    <a href="#">
                        <i class="fa fa-hand-o-up"></i>
                       <div class="rifhtline right-seven"><a href="#">返回顶部</a></div>
                    </a>
                </li>
            </ul>
    </aside>
</body>

</html>
<script>
    // --------------固定定位----------------
    var nav=document.querySelector('nav');
      window.onscroll=function(){
          var scrollTop=document.scrollingElement.scrollTop || document.body.scrollTop;
          console.log(scrollTop);
           if (scrollTop>130) {
                nav.style.position='fixed';
                nav.style.top='0';
           }
           else{
             nav.style.position='static';
           }
      }
    //   ----------------轮播----------------
    var box = document.querySelector('.main-bg');
    var ul = document.querySelector('.main-ul');
    var imgLis = document.querySelectorAll('.main-ul li');
    // console.log(imgLis);
    var lunbo = document.querySelectorAll('.lunbo li');
    // console.log(lunbo);
    var next = document.querySelector('.next');
    var prev = document.querySelector('.prev');

    var index = 0;
    function nextImg() {
        index = index == imgLis.length - 1 ? 0 : index + 1;
        showImg();
    }
    function prevImg() {
        index = index == 0 ? imgLis.length - 1 : index - 1;
        showImg();
    }
    // 展示图片
    function showImg() {
        for (var i = 0; i < imgLis.length; i++) {
            imgLis[i].className = '';
            lunbo[i].className = '';
        }
        imgLis[index].className = 'active';
        lunbo[index].className = 'current';
    }
    // 自动切换
    var timer = setInterval(nextImg, 1500);

    box.onmouseover = function () {
        clearInterval(timer);
        timer = null;
        next.style.display = 'block';
        prev.style.display = 'block';
    }
    box.onmouseout = function () {
        next.style.display = 'none';
        prev.style.display = 'none';
        if (timer != null) {
            return;
        }
        // console.log('出去');
        timer = setInterval(nextImg, 1000);
    }
    // 指示灯
    for (var i = 0; i < lunbo.length; i++) {
        lunbo[i].index = i;
        lunbo[i].onmouseover = function () {
            index = this.index;
            showImg();
        }
    }
    //手动切换
    prev.onclick = function () {
        prevImg();
        // console.log(prev);
    }
    next.onclick = function () {
        nextImg();
        // console.log('点击0');
    }
   //---------------返回顶部------------
   function backtop(){
       document.scrollingElement.scrollTop = 0;
   }
</script>